import { NavBar, DatePicker } from "antd-mobile";
import "./index.scss";
import { useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "lodash";
import DailyBill from "./components/DailyBill";
import billTypeToName from "@/contants"

const Month = () => {
  //按月做数据的分组
  const billList = useSelector((state) => state.bill.billList);
  //useMemo二次数据处理
  const monthGroup = useMemo(() => {
    // return 出去计算之后的值
    // _.groupBy以什么分组
    return _.groupBy(billList, (item) => dayjs(item.date).format("YYYY-MM"));
  }, [billList]);
  //控制日期选择框打开还是关闭
  const [datePickerVisible, setDatePickerVisible] = useState(false);
  //控制时间显示
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format("YYYY-MM");
  });
  //选取月的账单数据
  const [currentMonthList, setCurrentMonthList] = useState([]);
  const monthResult = useMemo(() => {
    // 总计支出/收入/结余
    const pay = currentMonthList
      ?.filter((item) => item.type === "pay")
      .reduce((pre, cur) => pre + cur.money, 0);
    const income = currentMonthList
      ?.filter((item) => item.type === "income")
      .reduce((pre, cur) => pre + cur.money, 0);
    return {
      pay,
      income,
      total: pay + income,
    };
  }, [currentMonthList]);
  //确认回调
  const handleConfirm = (date) => {
    setDatePickerVisible(false);
    const formatDate = dayjs(date).format("YYYY-MM");
    setCurrentMonthList(monthGroup[formatDate]);
    setCurrentDate(formatDate);
  };
  //初始化的时候显示统计数据
  useEffect(()=>{
    //格式化当前时间  dayjs() === dayjs(new Date())
    //边界值控制
    if(monthGroup[dayjs().format("YYYY-MM")]){
        setCurrentMonthList(monthGroup[dayjs().format("YYYY-MM")]);
    }
  }, [monthGroup])
  //当前月按照日分组
  const dayGroup = useMemo(() => {
    const groupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format("YYYY-MM-DD"));
    const keys = Object.keys(groupData)
    return {
        groupData,
        keys
    }
  }, [currentMonthList]);
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div
            className="date"
            onClick={() => {
              setDatePickerVisible(true);
            }}
          >
            <span className="text">{currentDate + ""}月账单</span>
            {/* 有expand样式表示箭头向上 */}
            {/* 打开时间选择器的时候应该箭头向上，关闭的时候箭头向下 */}
            <span
              className={classNames("arrow", datePickerVisible && "expand")}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className="twoLineOverview">
            <div className="item">
              <span className="money">{monthResult.pay || 0}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income || 0}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total || 0}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={datePickerVisible}
            max={new Date()}
            onCancel={() => {
              setDatePickerVisible(false);
            }} //点击取消
            onClose={() => {
              setDatePickerVisible(false);
            }} //点击蒙层
            onConfirm={handleConfirm} //点击确认
          />
          {/* 单日列表统计 */}
          {
            dayGroup.keys.map(key=>{
                return <DailyBill key={key} date={key} billList={dayGroup.groupData[key]}/>
            })
          }
        </div>
      </div>
    </div>
  );
};

export default Month;
